<script setup>
import { onMounted, ref } from 'vue';
import * as THREE from 'three';
import img from './assets/texture.jpg';
import * as dat from 'dat.gui';
let scene, camera, renderer, cubes, texture;

onMounted(() => {
  const canvas = document.querySelector('#mycanvas');
  const w = canvas.clientWidth;
  const h = canvas.clientHeight;

  // 初始化，创建场景、相机、渲染器
  scene = new THREE.Scene();
  //   scene.background = new THREE.Color(0xa0a0a0);

  {
    const near = 0;
    const far = 5;
    const color = 'lightblue';
    scene.fog = new THREE.Fog(color, near, far);
    scene.background = new THREE.Color(color);
  }

  camera = new THREE.PerspectiveCamera(75, w / h, 0.1, 1000);
  camera.position.z = 3;

  renderer = new THREE.WebGLRenderer({ canvas });
  renderer.setSize(w, h);
  //   document.body.appendChild(renderer.domElement);

  // 添加立方体
  const boxWidth = 1;
  const boxHeight = 1;
  const boxDepth = 1;
  const cubeGeometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
  const loader = new THREE.TextureLoader();
  //   const cubeMaterial = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
  texture = loader.load(img);
  const cubeMaterial = new THREE.MeshPhongMaterial({
    map: texture,
  });
  const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
  cube.position.x = 0;
  scene.add(cube);
  cubes = [cube];

  // 添加光线
  const color = 0xffffff;
  const intensity = 1;
  const light = new THREE.DirectionalLight(color, intensity);
  light.position.set(-1, 2, 4);
  scene.add(light);

  // 添加gui控制器
  const wrapModes = {
    ClampToEdgeWrapping: THREE.ClampToEdgeWrapping,
    RepeatWrapping: THREE.RepeatWrapping,
    MirroredRepeatWrapping: THREE.MirroredRepeatWrapping,
  };

  //   const gui = new dat.GUI();
  //   gui
  //     .add(new StringToNumberHelper(texture, 'wrapS'), 'value', wrapModes)
  //     .name('texture.wrapS')
  //     .onChange(updateTexture);
  //   gui
  //     .add(new StringToNumberHelper(texture, 'wrapT'), 'value', wrapModes)
  //     .name('texture.wrapT')
  //     .onChange(updateTexture);
  //   gui.add(texture.repeat, 'x', 0, 5, 0.01).name('texture.repeat.x');
  //   gui.add(texture.repeat, 'y', 0, 5, 0.01).name('texture.repeat.y');
  //   gui.add(texture.offset, 'x', -2, 2, 0.01).name('texture.offset.x');
  //   gui.add(texture.offset, 'y', -2, 2, 0.01).name('texture.offset.y');
  //   gui.add(texture.center, 'x', -0.5, 1.5, 0.01).name('texture.center.x');
  //   gui.add(texture.center, 'y', -0.5, 1.5, 0.01).name('texture.center.y');
  //   gui
  //     .add(new DegRadHelper(texture, 'rotation'), 'value', -360, 360)
  //     .name('texture.rotation');

  //   // 添加线
  //   const points = [
  //     new THREE.Vector3(-2, 0, 0),
  //     new THREE.Vector3(0, 2, 0),
  //     new THREE.Vector3(2, 0, 0),
  //   ];
  //   const lineGeometry = new THREE.BufferGeometry().setFromPoints(points);
  //   const lineMaterial = new THREE.LineBasicMaterial({
  //     color: 0x0000ff,
  //   });
  //   const line = new THREE.Line(lineGeometry, lineMaterial);
  //   scene.add(line);

  animate();
});

function updateTexture() {
  texture.needsUpdate = true;
}

//渲染
function animate() {
  cubes.forEach((c) => {
    c.rotation.x += 0.01;
    c.rotation.y += 0.01;
  });

  // line.rotation.x += 0.01;
  // line.rotation.y += 0.01;
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}

/**
 * 使用一个简单的类来给lil-gui提供一个可以以度数为单位进行操作的对象
 * 但它将以弧度为单位设置该属性。
 */
class DegRadHelper {
  constructor(obj, prop) {
    this.obj = obj;
    this.prop = prop;
  }
  get value() {
    return THREE.MathUtils.radToDeg(this.obj[this.prop]);
  }
  set value(v) {
    this.obj[this.prop] = THREE.MathUtils.degToRad(v);
  }
}
/**
 * 我们还需要一个类，将 "123" 这样的字符串转换为 123 这样的数字，
 * 因为three.js的枚举设置需要数字，比如 wrapS 和 wrapT，
 * 但lil-gui只使用字符串来设置枚举。
 */
class StringToNumberHelper {
  constructor(obj, prop) {
    this.obj = obj;
    this.prop = prop;
  }
  get value() {
    return this.obj[this.prop];
  }
  set value(v) {
    this.obj[this.prop] = parseFloat(v);
  }
}
</script>


<template>
  <div id="three">
    <canvas id="mycanvas" />
  </div>

</template>


<style lang="scss">
#three {
  width: 100%;
  height: 100%;
  overflow: hidden;

  #mycanvas {
    width: 100%;
    height: 100%;
    // display: block;
  }
}
</style>